<template>
    <div class="height24 overflowYAuto marginLeft0_5 flex-1">
        <div v-for="(category,index) in $store.state.category.categoryChildrens" :key="index">
            <a :href="category.children[0].url" class="height4_75">
                <img class='width10_5 height3_75 marginTop0_5' :src="category.children[0].icon" v-if="category.children">
            </a>

            <div class="clearfix" v-for="(item,index) in category.children" :key="index">
                <h2 class="marginTop0 MicrosoftYaHei redBoderLeftf8484f lineHeight1_3 paddingLeftPer5 black height1_3 fontSize0_7 marginBottom0_4 fontWeightNormal" v-if="index>0">{{item.site_cate_name}}</h2>
                <div class="widthPer100 heightAuto overflowHidden overflowYAuto flexWrap flex">
                    <div class="gray848484 fontSize0_65 marginTopPer1 marginRight0_15" v-for="(product,index) in item.children" :key="index">
                        <router-link class='textDecorationNone gray848484' :to="{path:'/categorySearch/'+product.id, append:'true'}">                        
                            <img class='width3_4 height3_4 block' :src="product.icon">
                            <span class="ell lineHeight1_5 block textCenter maxWidth3_4 MicrosoftYaHei">{{product.site_cate_name}}</span>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import '../../../style/normalize.css'
import './css/category.scss'
import '../../../style/base.css'
export default {

}
</script>